<template>
  <div class="smart-home-container">
    <!-- 顶部标题区 -->
    <header class="header">
      <img src="../../assets/返回1.svg" alt="返回" class="back-image" style="width: 20px; height: 20px;"
        @click="handleBack">
      <div class="header-left">
        <h1>书房</h1>
      </div>
      <div class="header-right">
        <span class="time">{{ currentTime }}</span>
        <span class="temperature">{{ currentTemperature }}°C</span>
      </div>
    </header>

    <!-- 场景模式区 -->
    <section class="scene-section">
      <h2 class="section-title">场景模式</h2>
      <div class="scene-list">
        <div v-for="scene in scenes" :key="scene.id" class="scene-card" :class="{ active: activeScene === scene.id }"
          @click="switchScene(scene.id)">
          <i :class="scene.icon" class="scene-icon"></i>
          <span class="scene-name">{{ scene.name }}</span>
        </div>
      </div>
    </section>

    <!-- 设备控制区 -->
    <section class="device-section">
      <h2 class="section-title">设备控制</h2>
      <div class="device-grid">
        <!-- 灯光控制 -->
        <div class="device-card">
          <div class="device-header">
            <i class="fas fa-lightbulb"></i>
            <h3>灯光控制</h3>
            <label class="switch">
              <input type="checkbox" v-model="lightStatus">
              <span class="slider round"></span>
            </label>
          </div>
          <div class="device-body">
            <div class="slider-container">
              <span>亮度</span>
              <input type="range" min="0" max="100" v-model="lightBrightness" class="brightness-slider"
                :disabled="!lightStatus">
              <span>{{ lightBrightness }}%</span>
            </div>
          </div>
        </div>

        <!-- 空调控制 -->
        <div class="device-card">
          <div class="device-header">
            <i class="fas fa-snowflake"></i>
            <h3>空调控制</h3>
            <label class="switch">
              <input type="checkbox" v-model="acStatus">
              <span class="slider round"></span>
            </label>
          </div>
          <div class="device-body">
            <div class="temperature-control">
              <button class="temp-btn" @click="decreaseTemp" :disabled="!acStatus">
                <img src="../../assets/减.svg" class="icon" style="height: 25px;width: 25px;">
              </button>
              <span class="temp-display">{{ acTemperature }}°C</span>
              <button class="temp-btn" @click="increaseTemp" :disabled="!acStatus">
                <img src="../../assets/加.svg" class="icon" style="height: 25px;width: 25px;">
              </button>
            </div>
            <div class="mode-selector">
              <button v-for="mode in acModes" :key="mode.id" :class="{ active: acMode === mode.id }"
                @click="switchAcMode(mode.id)" :disabled="!acStatus">
                {{ mode.name }}
              </button>
            </div>
          </div>
        </div>

        <!-- 窗帘控制 -->
        <div class="device-card">
          <div class="device-header">
            <i class="fas fa-blinds"></i>
            <h3>窗帘控制</h3>
            <label class="switch">
              <input type="checkbox" v-model="curtainStatus">
              <span class="slider round"></span>
            </label>
          </div>
          <div class="device-body">
            <div class="curtain-status">
              <span>{{ curtainStatus ? '已打开' : '已关闭' }}</span>
            </div>
          </div>
        </div>

        <!-- 新风系统 -->
        <div class="device-card">
          <div class="device-header">
            <i class="fas fa-fan"></i>
            <h3>新风系统</h3>
            <label class="switch">
              <input type="checkbox" v-model="fanStatus">
              <span class="slider round"></span>
            </label>
          </div>
          <div class="device-body">
            <div class="slider-container">
              <span>风速</span>
              <input type="range" min="1" max="3" v-model="fanSpeed" class="speed-slider" :disabled="!fanStatus">
              <span>{{ fanSpeedText }}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const handleBack = () => {
  router.push({ name: 'Home' });
};
// 当前时间
const currentTime = ref('');
// 当前温度
const currentTemperature = ref(26);

// 场景模式
const scenes = ref([
  { id: 'reading', name: '阅读模式', icon: 'fas fa-book-open' },
  { id: 'working', name: '工作模式', icon: 'fas fa-laptop' },
  { id: 'resting', name: '休息模式', icon: 'fas fa-couch' },
  { id: 'away', name: '离开模式', icon: 'fas fa-door-open' }
]);
const activeScene = ref('reading');

// 灯光控制
const lightStatus = ref(true);
const lightBrightness = ref(70);

// 空调控制
const acStatus = ref(true);
const acTemperature = ref(24);
const acModes = ref([
  { id: 'cool', name: '制冷' },
  { id: 'heat', name: '制热' },
  { id: 'dry', name: '除湿' },
  { id: 'auto', name: '自动' }
]);
const acMode = ref('cool');

// 窗帘控制
const curtainStatus = ref(false);

// 新风系统
const fanStatus = ref(true);
const fanSpeed = ref(2);
const fanSpeedText = computed(() => {
  const speeds = ['低', '中', '高'];
  return speeds[fanSpeed.value - 1];
});

// 更新时间
const updateTime = () => {
  const now = new Date();
  currentTime.value = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
};

// 切换场景
const switchScene = (sceneId: string) => {
  activeScene.value = sceneId;

  // 根据场景设置设备状态
  switch (sceneId) {
    case 'reading':
      lightStatus.value = true;
      lightBrightness.value = 70;
      acStatus.value = true;
      acTemperature.value = 24;
      acMode.value = 'cool';
      curtainStatus.value = false;
      fanStatus.value = true;
      fanSpeed.value = 2;
      break;
    case 'working':
      lightStatus.value = true;
      lightBrightness.value = 90;
      acStatus.value = true;
      acTemperature.value = 22;
      acMode.value = 'cool';
      curtainStatus.value = false;
      fanStatus.value = true;
      fanSpeed.value = 1;
      break;
    case 'resting':
      lightStatus.value = true;
      lightBrightness.value = 40;
      acStatus.value = true;
      acTemperature.value = 26;
      acMode.value = 'auto';
      curtainStatus.value = true;
      fanStatus.value = true;
      fanSpeed.value = 1;
      break;
    case 'away':
      lightStatus.value = false;
      acStatus.value = false;
      curtainStatus.value = false;
      fanStatus.value = false;
      break;
  }
};

// 调节空调温度
const increaseTemp = () => {
  if (acTemperature.value < 30) {
    acTemperature.value++;
  }
};

const decreaseTemp = () => {
  if (acTemperature.value > 16) {
    acTemperature.value--;
  }
};

// 切换空调模式
const switchAcMode = (modeId: string) => {
  acMode.value = modeId;
};

// 初始化
onMounted(() => {
  updateTime();
  setInterval(updateTime, 60000);
});
</script>

<style scoped>
.smart-home-container {
  width: 100%;
  min-height: 100vh;
  background-color: #F5F6FA;
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #333333;
}

/* 顶部标题区 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #E0E0E0;
  margin-bottom: 24px;
}

.header-left h1 {
  font-size: 28px;
  font-weight: 600;
  margin: 0;
  color: #4A90E2;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #666666;
}

.header-right .time {
  font-size: 18px;
  font-weight: 500;
}

.header-right .temperature {
  font-size: 18px;
  font-weight: 500;
}

/* 场景模式区 */
.section-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 16px;
  color: #333333;
}

.scene-list {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
}

.scene-card {
  flex: 1;
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.scene-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.scene-card.active {
  background-color: #4A90E2;
  color: white;
}

.scene-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.scene-name {
  font-size: 16px;
  font-weight: 500;
}

/* 设备控制区 */
.device-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.device-card {
  background-color: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.device-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}

.device-header h3 {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
  flex: 1;
}

.device-header i {
  font-size: 20px;
  color: #4A90E2;
}

/* 开关样式 */
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked+.slider {
  background-color: #4A90E2;
}

input:checked+.slider:before {
  transform: translateX(26px);
}

/* 滑块控制 */
.slider-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brightness-slider,
.speed-slider {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  background: linear-gradient(to right, #4A90E2 0%, #4A90E2 var(--value), #E0E0E0 var(--value), #E0E0E0 100%);
  border-radius: 3px;
  outline: none;
}

.brightness-slider::-webkit-slider-thumb,
.speed-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4A90E2;
  cursor: pointer;
}

/* 温度控制 */
.temperature-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.temp-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #4A90E2;
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.temp-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.temp-btn:hover:not(:disabled) {
  transform: scale(1.1);
}

.temp-display {
  font-size: 20px;
  font-weight: 500;
  min-width: 50px;
  text-align: center;
}

/* 模式选择 */
.mode-selector {
  display: flex;
  gap: 8px;
}

.mode-selector button {
  flex: 1;
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #E0E0E0;
  background-color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.mode-selector button.active {
  background-color: #4A90E2;
  color: white;
  border-color: #4A90E2;
}

.mode-selector button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 窗帘状态 */
.curtain-status {
  text-align: center;
  font-size: 16px;
  color: #666666;
}
</style>
